<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<div class="father">
    <div class="son"></div>
</div>
<button>获取节点</button>

<body>
    <script>
        /*
        父节点查找：
            parentNode 返回最近一级的父节点如果没有找到则返回null 
        parentNode和parentElement的区别:
            第一点：parentNode跟parentElement，前者是w3c标准，后者只ie支持。
                   parentElement是ie专用的，就是说在firefox(ff)浏览器里是不能使用的，一般情况parentNode可以取代parentElement的所有功能。
            第二点：
            parentElement匹配的是parent为element的情况，而parentNode匹配的则是parent为node的情况。element是包含在node里的，它的nodeType是1。
         */
        const son = document.querySelector(".son")
        const button = document.querySelector("button")
        button.addEventListener("click", function () {
            // console.log(son.parentNode);
            // console.log(son.parentElement);
        })
    </script>
</body>

</html>